<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>欧尼酱~~~</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/bootstrap.js"></script>
    <!-- <link rel="stylesheet" href="./css/swiper-bundle.css" /> -->
    <style>
        /* .bb {
            display: flex;
        }
        
        .dd {
            width: 50px;
            height: 50px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            margin-right: 1px;
        } */
        /* .jd {
            position: relative;
            width: 250px;
            height: 80px;
            left: 30%;
            margin-top: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .jd_d {
            position: absolute;
            background-color: rgba(253, 253, 253, 0.404);
            border-radius: 16px;
            font-size: 60px;
            text-align: center;
            padding: 0 12px 0 12px;
        }
        
        .jd_ipt {
            position: relative;
            height: 20px;
            border: none;
            outline: none;
            border-radius: 15px;
            padding-left: 10px;
            top: 100%;
            text-align: center;
        } */
        /* img {
            position: absolute;
        } */
        /* table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: rgb(115, 146, 247);
        } */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* .c {
            position: absolute;
            background-color: red;
            width: 150px;
            height: 150px;
        } */
        /* .imagebox {
        display: flex;
        width: 400px;
        flex-wrap: wrap;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    button {
        height: 60px;
        width: 120px;
        margin-right: 5px;
        border: none;
        border-radius: 12px;
    }
    #img {
        background-size: 256px 256px;
        width: 256px;
        height: 256px;
        margin-top: 10px;
        border-radius: 35px;
    }
    #psw {
        outline: none;
        border: none;
        border-bottom: 1px #CCC solid;
    }
    #play {
        background-size: 128px 128px;
        width: 128px;
        height: 128px;
    } */
        /* li {
            background-color: aqua;
            margin-bottom: 1px;
            width: 350px;
        } */
        
        body {
            background-color: #CCC!important;
        }
        /* 
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        body {
            background: #fff;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .swiper {
            width: 240px;
            height: 320px;
        }
        
        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            font-size: 22px;
            font-weight: bold;
            color: #fff;
        }
        
        .swiper-slide:nth-child(1n) {
            background-color: rgb(206, 17, 17);
        }
        
        .swiper-slide:nth-child(2n) {
            background-color: rgb(0, 140, 255);
        }
        
        .swiper-slide:nth-child(3n) {
            background-color: rgb(10, 184, 111);
        }
        
        .swiper-slide:nth-child(4n) {
            background-color: rgb(211, 122, 7);
        }
        
        .swiper-slide:nth-child(5n) {
            background-color: rgb(118, 163, 12);
        }
        
        .swiper-slide:nth-child(6n) {
            background-color: rgb(180, 10, 47);
        }
        
        .swiper-slide:nth-child(7n) {
            background-color: rgb(35, 99, 19);
        }
        
        .swiper-slide:nth-child(8n) {
            background-color: rgb(0, 68, 255);
        }
        
        .swiper-slide:nth-child(9n) {
            background-color: rgb(218, 12, 218);
        }
        
        .swiper-slide:nth-child(10n) {
            background-color: rgb(54, 94, 77);
        } */
        /* .d {
            background-color: black;
        }
        
        .h {
            color: white;
        } */
        /* .container {
            position: relative;
            height: 10rem;
            width: 100%;
            overflow: hidden;
        }
        
        .ul-lists {
            position: absolute;
            list-style: none;
            display: flex;
        }
        
        .ul-lists li {
            background-repeat: no-repeat;
            float: left;
            height: 10rem;
        }
        
        .dot {
            position: relative;
            list-style: none;
            display: flex;
            align-items: center;
            top: 100%;
            left: 100%;
            transform: translate(-100%, -100%);
            float: left;
        }
        
        .dotG {
            background-color: rgba(128, 128, 128, 0.616);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            transition: linear .3s;
        }
        
        .v {
            background-color: rgba(174, 205, 218, 0.925);
            border-radius: 10px;
            width: 30px;
            height: 10px;
            margin: 0 10px 0 10px;
        }
        
        .lid {
            background-color: rgba(78, 78, 78, 0.329);
            width: 100%;
            height: 3000px;
        }
        
        .toTop {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: rgba(201, 201, 201, 0.63);
            left: 90%;
            transform: translateX(-100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35px;
        } */
        /* .bigBox {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 500px;
        }
        
        .imgs {
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 650px;
            height: 400px;
            overflow: hidden;
            border-radius: 30px;
        }
        
        .imgs ul {
            position: absolute;
            list-style: none;
        }
        
        .imgs ul li {
            float: left;
            width: 650px;
            height: 400px;
            background-position: center;
        }
        
        .cer {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 98%;
            transform: translateY(-98%);
            z-index: 99;
        }
        
        .cer li {
            background-color: rgba(185, 185, 185, 0.829);
            width: 40px;
            height: 10px;
            list-style: none;
            margin-right: 10px;
            border-radius: 10px;
            transition: .3s linear;
        }
        
        .cer li:hover {
            height: 20px;
            width: 60px;
            background-color: rgb(233, 233, 233);
        }
        
        .arr {
            position: relative;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: space-between;
            font-size: 30px;
        }
        
        .arrL,
        .arrR {
            cursor: pointer;
            user-select: none;
        } */
        /* .bann {
            width: 200px;
            height: 50px;
            position: relative;
            display: flex;
            align-items: center;
        }
        
        span {
            position: absolute;
            background-color: red;
            width: 50px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Fira Code';
            z-index: 99;
            cursor: pointer;
        }
        
        .bgr {
            position: absolute;
            background-color: red;
            width: 100%;
            height: 100%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        } */
        /* div {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: pink;
            left: 0;
        }
        
        span {
            display: block;
            position: relative;
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
        } */
        /* .box {
            height: 60px;
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
            background-color: red;
        }
        
        .animation {
            width: 180px;
            height: 60px;
            position: absolute;
            background-color: cyan;
            display: flex;
            justify-content: right;
            align-items: center;
            padding-right: 5px;
            font-size: 40px;
            font-family: 'Fira Code', Consolas;
        } */
        /* .mouseOver {
            position: absolute;
            background-color: red;
            width: 200px;
            height: 200px;
        }
        
        .mouseEnter {
            position: absolute;
            background-color: cyan;
            width: 300px;
            height: 300px;
        } */
        /* .a {
            width: 100%;
            height: 300px;
            background-color: rgb(228, 212, 141);
        }
        
        .b {
            width: 100%;
            height: 400px;
            background-color: rgb(103, 233, 124);
        }
        
        .c {
            width: 100%;
            height: 500px;
            background-color: rgb(94, 206, 216);
        }
        
        .d {
            width: 100%;
            height: 600px;
            background-color: rgb(180, 184, 243);
        }
        
        .e {
            position: fixed;
            left: 100%;
            transform: translateX(-100%);
            top: 60%;
            width: 50px;
            background-color: white;
            height: 50px;
            z-index: 999;
            display: none;
            align-items: center;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            border-radius: 10px;
            line-height: 20px;
        } */
        /* .i {
            background-color: rgb(182, 194, 115);
            width: 180px;
            height: 350px;
            overflow: auto;
        } */
        /* .container {
            position: relative;
            left: 100px;
            top: 100px;
        } */
        /* .box {
            position: relative;
            display: flex;
            overflow: hidden;
            width: 350px;
            height: 350px;
        }
        
        .img {
            background-image: url(./shenzi.png);
            background-size: 350px 350px;
            background-repeat: no-repeat;
            width: 350px;
            height: 350px;
        }
        
        .ylb {
            position: absolute;
            background-color: rgba(245, 243, 156, 0.438);
            width: 150px;
            height: 150px;
            cursor: move;
        }
        
        .mas {
            position: absolute;
            left: 350px;
            top: 0;
            display: none;
            background-image: url(./shenzi.png);
            background-color: rgba(177, 177, 177, 0.76);
            background-repeat: no-repeat;
            width: 500px;
            height: 500px;
        } */
        /* .clickLogin {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 30px;
            user-select: none;
            cursor: pointer;
        }
        
        .container {
            display: none;
            width: 600px;
            height: 300px;
            background-color: rgba(224, 236, 247, 0.616);
            flex-direction: column;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 30px;
            box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
        }
        
        .loginbox {
            width: 80%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        input {
            outline: none;
            border: none;
            background-color: rgba(255, 255, 255, 0.705);
            height: 30px;
            border-radius: 15px;
            padding-left: 15px;
        }
        
        .closeC {
            background-color: rgba(224, 236, 247, 0.822);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            font-family: 'Courier New', Courier, monospace;
            border: 1px solid rgba(169, 231, 255, 0.747);
            position: absolute;
            left: 105%;
            top: -40px;
            transform: translateX(-100%);
            user-select: none;
            cursor: pointer;
        }
        
        #moveD {
            position: absolute;
            border-radius: 30px;
            width: 100%;
            height: 60px;
        } */
        /* .flexUl {
            display: flex;
            justify-content: space-between;
            width: 350px;
            margin: 0 auto;
        }
        
        ul {
            width: 80px;
            text-align: center;
            list-style: none;
        }
        
        li {
            display: none;
            background-color: white;
        } */
        /* .changeClassName{
        color: red;
    }
    .changed{
        color: green;
    } */
        /* .tips {
            font-size: 12px;
        }
        
        .tips-right {
            color: rgb(79, 97, 199);
        }
        
        .tips-wrong {
            color: rgb(199, 79, 79);
        } */
        /* .ads {
            background-image: url(./shenzi.png);
            opacity: 60%;
            background-position: 1px;
            position: absolute;
            width: 100%;
            height: 150px;
            border-bottom-right-radius: 100px;
            border-top-right-radius: 100px;
            border-bottom-left-radius: 100px;
            top: 150px
        }
        
        #closeAD {
            width: 30px;
            height: 30px;
            text-align: center;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.932);
            border: none;
            border-radius: 50%;
            background-color: rgba(218, 224, 230, 0.534);
            cursor: pointer;
        } */
        /* div {
            background-color: white;
            width: 60px;
            height: 30px;
            transition: .9s ease-in-out;
        } */
        /* .bg {
            background-color: red;
        } */
        /* .mysw {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: red;
        } */
    </style>
</head>

<body>
    <!-- <div class="mysw">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./img/lh.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="./img/xg.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="./img/shenzi.png" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                ...
            </div>

            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div> -->
    <!-- Swiper -->
    <!-- <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/xg.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div> -->
    <!-- <div class="lco"></div> -->
    <!-- 手机号码：<input type="text"><button></button> -->
    <!-- <div class="bb">
        <div class="dd hour"></div>
        <div class="dd minutes"></div>
        <div class="dd second"></div>
    </div>

    <button class="btn1"></button>
    <button class="btn2"></button> -->
    <!-- <div class="jd">
        <div class="jd_d"></div>
        <input type="text" class="jd_ipt">
    </div> -->
    <!-- <img src="./shenzi.png" alt="" width="50" height="50" style="border-radius: 50%;"> -->
    <!-- <ul>
        <li>OOOOOOOOOOOOOOOOOOOO</li>
        <li>OOOOOOOOOOOOOOOOOOOO</li>
        <li>OOOOOOOOOOOOOOOOOOOO</li>
        <li>OOOOOOOOOOOOOOOOOOOO</li>
        <li>OOOOOOOOOOOOOOOOOOOO</li>
    </ul> -->
    <!-- <a href="https://www.baidu.com">百度</a> -->
    <!-- <div>
        <li>list</li>
        <li>list</li>
        <li>list</li>
    </div> -->
    <!-- <div class="father">
        <div class="son"></div>
    </div> -->
    <!-- <div class="btnevent">btn</div> -->
    <!-- <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul> -->
    <!-- <button>点击创建按钮</button> -->
    <!-- <table>
        <thead>
            <tr>
                <th>老婆名称</th>
                <th>属性</th>
                <th>地区</th>
                <th>武器</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table> -->
    <!-- <ul>
        <button>123</button>
        <button>456</button>
        <button>789</button>
    </ul> -->
    <!-- <textarea name="" id="" cols="60" rows="5"></textarea><button>发布</button>
    <ul>
    </ul> -->
    <!-- <ul>
        <li>123</li>
    </ul> -->
    <!-- <span class="sa"></span ><span class="sb"></span><span class="sc"></span>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div> -->
    <!-- <div class="flexUl">
        <ul>霆霓快雨
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
        </ul>
        <ul>霆霓快雨
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
        </ul>
        <ul>霆霓快雨
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
        </ul>
        <ul>霆霓快雨
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
            <li>刻晴</li>
        </ul>
    </div> -->
    <!-- <div class="rt">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div> -->
    <!-- <divnn></divnn> -->
    <!-- <div id="getID"></div> -->
    <!-- <table>
        <thead>
            <tr>
                <th><input type="checkbox" name="" id="j_all"></th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="" id="j_tbs"></td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="j_tbs"></td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="j_tbs"></td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table> -->
    <!-- <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table> -->
    <!-- <div id="time">2019-9-9</div> -->
    <!-- <ul>
        <li>神子神子。我的老婆1</li>
        <li>神子神子。我的老婆2</li>
        <li>神子神子。我的老婆3</li>
        <li>神子神子。我的老婆4</li>
        <li>神子神子。我的老婆5</li>
        <li>神子神子。我的老婆6</li>
    </ul>
    <ol id="ol">
        <li>凌华</li>
        <li>凌华</li>
        <li>凌华</li>
        <li>凌华</li>
        <li>凌华</li>
    </ol> -->
    <!-- <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box1">盒子3</div>
    <ul>
        <li>神子1</li>
        <li>神子2</li>
        <li>神子3</li>
    </ul> -->
    <!-- <button id="timer"></button>
    <div id='btn2time'></div>
    <ppp>
        <dvv>你好 你好 嘿嘿
        </dvv>
    </ppp> -->
    <!-- <div class="imagebox">
        <button id="xg"></button>
        <button id="lh"></button>
        <button id="sz"></button>
        <div id="img"></div>
    </div> -->
    <!-- <button id="btnn1"></button>
    <div class="iptt">
        <img src="./shenzi.png" alt="" width="256" height="256" class="iptt">
    </div>
    <button id="btnn2"></button> -->
    <!-- <div class="pswdD">
        <input type="password" id="psw">
        <svg id="icon1" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1539"><path d="M941.677 391.71c9.338-14.006 6.225-32.681-6.225-43.575-14.006-10.894-32.681-7.781-43.575 6.225-1.557 1.556-174.3 205.426-379.728 205.426-199.2 0-379.727-205.426-381.283-206.982-10.895-12.45-31.125-14.006-43.576-3.113-12.45 10.894-14.006 31.125-3.113 43.576 3.113 4.668 40.463 46.687 99.6 93.375l-79.37 82.482c-12.45 12.45-10.893 32.681 1.557 43.575 3.113 6.225 10.894 9.338 18.676 9.338 7.78 0 15.562-3.113 21.787-9.338l85.594-88.706c40.463 28.013 88.707 54.47 141.62 73.144l-32.682 110.495c-4.668 17.118 4.67 34.237 21.788 38.906h9.337c14.006 0 26.457-9.338 29.569-23.344l32.681-110.495c24.9 4.669 51.357 7.782 77.813 7.782s52.913-3.113 77.814-7.782l32.68 108.939c3.114 14.006 17.12 23.343 29.57 23.343 3.113 0 6.225 0 7.782-1.556 17.118-4.67 26.456-21.787 21.788-38.906L649.099 595.58c52.914-18.676 101.157-45.132 141.62-73.144l84.038 87.15c6.225 6.225 14.006 9.338 21.787 9.338 7.781 0 15.563-3.113 21.787-9.337 12.45-12.451 12.45-31.125 1.557-43.576l-79.37-82.481c63.808-46.689 101.16-91.82 101.16-91.82z" fill="" p-id="1540"></path></svg>
        <svg id="icon2" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1551"><path d="M517.418667 229.290667a496.128 496.128 0 0 1 318.72 120.064L1024 510.634667c-64.085333 55.04-127.829333 110.378667-192.213333 165.034666a534.442667 534.442667 0 0 1-50.261334 37.077334c-27.989333 18.090667-57.813333 33.322667-88.832 45.397333a499.114667 499.114667 0 0 1-371.584-4.096 494.506667 494.506667 0 0 1-133.248-82.090667L0 510.634667C64.085333 455.637333 127.829333 400.256 192.213333 345.6c4.437333-3.626667 8.874667-7.253333 13.354667-10.794667 26.709333-20.650667 55.125333-38.826667 85.376-53.845333a497.237333 497.237333 0 0 1 226.474667-51.669333z m-10.154667 64a432.341333 432.341333 0 0 0-204.970667 53.973333c-26.026667 14.421333-50.261333 31.530667-72.874666 50.730667l-131.2 112.64c45.056 38.698667 89.898667 77.568 135.168 116.010666a447.232 447.232 0 0 0 47.914666 34.986667 433.493333 433.493333 0 0 0 513.28-38.357333l131.2-112.64c-45.056-38.656-89.898667-77.568-135.168-116.010667a444.416 444.416 0 0 0-86.016-56.32 434.133333 434.133333 0 0 0-197.333333-45.013333zM516.010667 356.864a155.776 155.776 0 0 1 66.602666 16.938667 156.672 156.672 0 0 1 67.584 67.584 154.410667 154.410667 0 0 1 15.189334 94.250666 155.434667 155.434667 0 0 1-213.76 119.338667 155.989333 155.989333 0 0 1-79.488-75.733333 153.6 153.6 0 0 1-13.525334-43.605334 154.410667 154.410667 0 0 1 15.189334-94.250666 156.672 156.672 0 0 1 67.584-67.584 155.776 155.776 0 0 1 66.602666-16.938667c4.010667-0.042667 4.010667-0.042667 8.021334 0z m-6.4 64c-13.610667 0.512-26.88 3.669333-39.04 9.898667a92.16 92.16 0 0 0-43.434667 47.829333 91.136 91.136 0 0 0-2.858667 58.368c7.296 25.6 26.026667 47.189333 50.261334 58.197333a91.306667 91.306667 0 0 0 127.189333-99.328 91.776 91.776 0 0 0-44.416-62.933333 92.373333 92.373333 0 0 0-47.701333-12.032z" p-id="1552"></path></svg>
    </div> -->
    <!-- <input type="text" value="" id="iptfocs"> -->
    <!-- <div id="play"></div> -->
    <!-- <div class="changeClassName"></div> -->
    <!-- <input type="text"><span class="tips">输入6-16位</span> -->
    <!-- <input type="text" id="username"><input type="password" id="passwd"><button>注册</button> -->
    <!-- <div class="ads">
        <button id="closeAD">x</button>
    </div> -->
    <!-- <div class="mainMenu"><span>主菜单</span>
        <div class="menu2"><span>菜单2</span></div>
        <div class="menu3"><span>菜单3</span></div>
    </div> -->
    <!-- <button>O</button> -->
    <!-- <button>o</button>
    <button>o</button>
    <button>o</button>
    <button>o</button>
    <button>o</button> -->
    <!-- <a href="index.html">点我进首页</a>
    <button>前进</button> -->
    <!-- <div class="clickLogin">点我显示</div>
    <div class="container">
        <div id="moveD"></div>
        <div class="loginbox">
            <h1>登录</h1>
            <div class="account">
                <span>账号：</span><input type="text">
            </div>
            <div class="psw">
                <span>密码：</span><input type="password">
            </div>
        </div>
        <div class="closeC">×</div>
    </div> -->
    <!-- <div class="container">
        <div class="box">
            <div class="img"></div>
            <div class="ylb"></div>
        </div>
        <div class="mas"></div>
    </div> -->
    <!-- <div class="i">
        hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello
        hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello
        hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello
        hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello
        hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hellohello hello hello
    </div>
    <input type="checkbox">我同意以上Hello
    <input type="button" value="注册"> -->
    <!-- <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div> -->
    <!-- <div class="mouseEnter">
        <div class="mouseOver"></div>
    </div> -->
    <!-- <div class="box">
        <div class="animation">→</div>
    </div> -->
    <!-- <button class="按钮0">点击0</button>
    <button class="按钮800">点击800</button>
    <div></div>
    <span></span> -->
    <!-- <div id="fas"></div> -->
    <!-- <div class="bann">
        <span></span>
        <div class="bgr">问题反馈</div>
    </div> -->
    <!-- <div class="bigBox">
        <div class="imgs">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ol class="cer">
            </ol>
            <div class="arr">
                <div class="arrL">
                    <==
                </div>
                <div class="arrR">
                    ==>
                </div>
            </div>
        </div>
    </div> -->
    <!-- <script src="./animate.js"></script> -->
    <!-- <div class="c"></div> -->
    <!-- <div class="container">
        <ul class="ul-lists">
        </ul>
        <ol class="dot">
        </ol>
    </div>
    <div class="lid"></div>
    <div class="toTop">
        👆
    </div> -->
    <!-- <div class="a b c e f">
        <button>开关</button>
    </div> -->
    <!-- <script src="./js/animate.js"></script>
    <script type='application/javascript' src='./js/fastclick.js'></script>
    <script src="./js/swiper-bundle.js"></script> -->
    <!-- <input type="text">
    <button class="set">存储数据</button>
    <button class="get">取出数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button> -->
    <!-- <input type="text" id="username">
    <input type="checkbox" name="" id="remember">记住用户名 -->
    <script>
        //
        /* let username = document.querySelector('#username')
        let remember = document.querySelector('#remember')
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username')
            remember.checked = true
        }
        remember.addEventListener('change', () => {
                if (remember.checked) {
                    localStorage.setItem('username', username.value)
                } else {
                    localStorage.removeItem('username')
                }
            }) */
        /* let 数据 = document.querySelector('input')
        const 存 = document.querySelector('.set')
        const 取 = document.querySelector('.get')
        const 删 = document.querySelector('.remove')
        const 清 = document.querySelector('.del')
        var index = 0
        存.addEventListener('click', () => {
            let value = 数据.value
            sessionStorage.setItem(`str${index}`, value)
                // sessionStorage关闭页面，生命周期结束
            localStorage.setItem(`str${index}`, value)
                // localStorage同一个浏览器生命周期永久
            index++
        })
        取.addEventListener('click', () => {
            console.log(sessionStorage.getItem('str'));
            console.log(localStorage.getItem('str'));
        })
        删.addEventListener('click', () => {
            sessionStorage.removeItem('mystr')
            lcoalStorage.removeItem('mystr')
        })
        清.addEventListener('click', () => {
            sessionStorage.clear()
            localStorage.clear()
        }); */
        /* $('.carousel').carousel({
            interval: 1000
        }); */
        /* var swiper = new Swiper(".mySwiper", {
            effect: "cards",
            grabCursor: true,
        }); */
        /* if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        } */
        /* let ull = document.querySelector('.ul-lists')
        let dott = document.querySelector('.dot')
        let lld = document.querySelector('.lid')
        let toTop = document.querySelector('.toTop');
        let imgList = ['lh.jpg', 'xg.jpg']
        let j = 0,
            fingerX = 0,
            fingerY = 0,
            x = 0,
            y = 0,
            moveX = 0,
            moveY = 0,
            indexgo = 0;
        //回到顶部
        toTop.style.top = window.innerHeight - 90 + 'px'
        toTop.style.display = 'none'
        window.addEventListener('scroll', () => {
            if (this.pageYOffset >= lld.offsetTop) {
                toTop.style.display = 'flex'
            } else {
                toTop.style.display = 'none'
            }
        })
        toTop.addEventListener('touchstart', () => {
            window.scroll(0, 0)
        });
        // 生成轮播图
        for (let i = 0; i < 4; i++) {
            let li = document.createElement('li')
            let dot = document.createElement('li')
            ull.append(li)
            dott.append(dot)
            li.style.backgroundImage = `url('${imgList[j]}')`
            li.style.backgroundPosition = 'center'
            li.style.width = window.innerWidth + 'px'
            li.className = 'li_' + (i + 1)
            dot.className = 'dotG dt_' + (i + 1)
            j++
            j = j > imgList.length - 1 ? j = 0 : j++
        }
        // 轮播图自动播放
        document.querySelectorAll('.dotG')[indexgo].classList.add('v')
        let timm = setInterval(() => {
            document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
            indexgo == ull.children.length - 1 ? indexgo = 0 : indexgo++;
            // customAnimation(ull, -ull.children[0].offsetWidth * indexgo)
            ull.style.transition = 'ease-in-out .8s'
            ull.style.transform = 'translateX(' + (-ull.children[0].offsetWidth * indexgo) + 'px)'
            document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
                // ull.style.transition = 'ease-in-out .8s'
                // ull.style.transform = 'translateX(' + (-ull.children[0].offsetWidth * indexgo) + 'px)'
        }, 3000);
        ull.addEventListener('touchstart', function(e) {
            fingerX = e.targetTouches[0].pageX
            x = this.offsetLeft
            clearInterval(timm)
        })
        ull.addEventListener('touchmove', function(e) {
            moveX = e.targetTouches[0].pageX - fingerX
            ull.style.transition = 'none'
                // ull.style.transform = 'translateX(' + moveX + 'px)'
                // this.style.left = moveX + x + 'px'
            e.preventDefault() //阻止屏幕滚动默认行为
        });
        ull.addEventListener('touchend', function(e) {
                if (Math.abs(moveX) > 50) {
                    if (moveX > 0) {
                        document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
                        indexgo == 0 ? indexgo = ull.children.length - 1 : indexgo--
                            document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
                    } else {
                        document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
                        indexgo == ull.children.length - 1 ? indexgo = 0 : indexgo++
                            document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
                    }
                } else {
                    ull.style.left = (-ull.children[0].offsetWidth * indexgo) + 'px'
                }
                ull.style.transition = 'ease-in-out .8s'
                ull.style.transform = 'translateX(' + (-ull.children[0].offsetWidth * indexgo) + 'px)';
                // 手指松开定时器重启
                clearInterval(timm)
                timm = setInterval(() => {
                    document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
                    indexgo == ull.children.length - 1 ? indexgo = 0 : indexgo++;
                    ull.style.transition = 'ease-in-out .8s'
                    ull.style.transform = 'translateX(' + (-ull.children[0].offsetWidth * indexgo) + 'px)'
                    document.querySelectorAll('.dotG')[indexgo].classList.toggle('v')
                }, 3000);
            }) */
        /* let cll = document.querySelector('div')
        let 按钮 = document.querySelector('button')
        按钮.addEventListener('click', () => {
            document.querySelector('body').classList.toggle('d')
            按钮.classList.toggle('d')
            按钮.classList.toggle('h')
        })
        cll.classList.add('g')
        cll.classList.remove('b')
        console.log(cll.classList.value); */
        /* //touchstart touchmove touchend
        let c = document.querySelector('.c')
        let fingerX = 0,
            fingerY = 0,
            x = 0,
            y = 0,
            moveX = 0,
            moveY = 0
        c.addEventListener('touchstart', function(e) {
            fingerX = e.targetTouches[0].pageX //手指X
            fingerY = e.targetTouches[0].pageY //手指Y
            x = this.offsetLeft
            y = this.offsetTop
        })
        c.addEventListener('touchmove', function(e) {
            moveX = e.targetTouches[0].pageX - fingerX
            moveY = e.targetTouches[0].pageY - fingerY
            this.style.left = x + moveX + 'px'
            this.style.top = y + moveY + 'px'
            e.preventDefault() //阻止屏幕滚动默认行为
        })
        c.addEventListener('touchend', function(e) {}); */
        /* //轮播图
        let li = document.querySelectorAll('li'),
            ul = document.querySelector('ul'),
            cer = document.querySelector('.cer'),
            imgList = ['lh.jpg', 'xg.jpg', 'shenzi.png'],
            width = li[0].offsetWidth,
            arrow = document.querySelector('.arr')
        j = 0,
            imgIndex = 0
        for (let i = 0; i < li.length; i++) {
            let liCer = document.createElement('li')
            cer.appendChild(liCer)
            cer.children[i].addEventListener('mouseenter', () => {
                imgIndex = i
                customAnimation(ul, -imgIndex * li[0].offsetWidth)
            })
        }

        ul.style.width = li[0].offsetWidth * li.length + 'px'
        for (let i = 0; i <= li.length - 1; i++) {
            li[i].style.backgroundImage = `url(${imgList[j]})`
            j == imgList.length - 1 ?
                j = 0 :
                j++
        }
        let 轮播图自动播放时长 = 6
        setInterval(() => {
            imgIndex == li.length - 1 ? imgIndex = 0 : imgIndex++;
            customAnimation(ul, -imgIndex * li[0].offsetWidth)
        }, 轮播图自动播放时长 * 1000)
        ul.addEventListener('mouseenter', () => {
            arrow.style.display = 'flex'
        })
        arrow.addEventListener('mouseenter', () => {
            arrow.style.display = 'flex'
        })
        arrow.addEventListener('mouseout', () => {
            arrow.style.display = 'none'
        })
        arrow.children[0].addEventListener('click', () => {
            imgIndex > 0 ? imgIndex-- : imgIndex = li.length - 1
            customAnimation(ul, -imgIndex * li[0].offsetWidth)
        })
        arrow.children[1].addEventListener('click', () => {
            imgIndex < li.length - 1 ? imgIndex++ : imgIndex = 0
            customAnimation(ul, -imgIndex * li[0].offsetWidth)
        }); */
        /* let span = document.querySelector('span')
        let bgr = document.querySelector('.bgr')
        bgr.style.left = -bgr.offsetWidth + span.offsetWidth + 'px'
        span.innerHTML = '👉'
        span.addEventListener('mouseenter', () => {
            animation(bgr, 0, () => {
                span.innerHTML = '👈'
            })
        })
        bgr.addEventListener('mouseout', () => {
            animation(bgr, -bgr.offsetWidth + span.offsetWidth, () => {
                span.innerHTML = '👉'
            })
        }) */
        /* let 上面 = document.querySelector('div')
        let 下面 = document.querySelector('span')
        let 按钮0 = document.querySelector('.按钮0')
        let 按钮800 = document.querySelector('.按钮800')
        animation(下面, 200)
        按钮0.addEventListener('click', () => {
            animation(上面, 0, () => {
                console.log('0');
            })
        });
        按钮800.addEventListener('click', () => {
            animation(上面, 800, () => {
                console.log('800');
            })
        }); */
        /* let div = document.querySelectorAll('div')
        let box = div[0]
        let animation = div[1]
        let flag = 0
        box.style.width = animation.offsetWidth + 'px'
        box.style.left = -animation.offsetWidth + 40 + 'px'
        box.addEventListener('mouseenter', () => {
            let move = setInterval(() => {
                if (!flag) {
                    if (box.offsetLeft == 0) {
                        clearInterval(move)
                        flag = 1
                    } else {
                        animation.innerHTML = '←'
                        box.style.left = box.offsetLeft + 1 + 'px'
                    }
                }
            }, 3)
        })
        box.addEventListener('mouseout', () => {
            let move = setInterval(() => {
                if (flag) {
                    animation.innerHTML = '→'
                    box.style.left = box.offsetLeft - 1 + 'px'
                    if (box.offsetLeft <= -animation.offsetWidth + 40) {
                        clearInterval(move)
                        flag = 0
                    }
                }
            }, 3)
        }); */
        /* //匀速动画
        function move(elm) {
            elm.style.left = elm.offsetLeft + 1 + 'px';
        }
        anim = (elm, b_width, elmWidth, speed) => {
            elm.tim = setInterval(() => {
                b_width == elm.offsetLeft + elmWidth ? clearInterval(elm.tim) : move(elm)
            }, speed)
        };
        anim(ani, Math.ceil(innerWidth - innerWidth / 2), ani.offsetWidth, 5)
        anim(fs, innerWidth, fs.offsetWidth, 5); */
        /* //缓冲动画
        BuffAnimat(innerWidth, fs, 50)
        BuffAnimat(parseInt(innerWidth / 2), ani, 50)
        function BuffAnimat(width, elm, speed) {
            let BufferSpeed
            let BufferAnimation = setInterval(()=> {
                BufferSpeed = width > elm.offsetLeft ? Math.ceil((width - (elm.offsetLeft + elm.offsetWidth)) / 10) : Math.floor((width - (elm.offsetLeft + elm.offsetWidth)) / 10)
                elm.style.left = elm.offsetLeft == width ? clearInterval(BufferAnimation) : elm.offsetLeft + BufferSpeed + "px"
            }, speed)
        } */
        /* let i_class = document.querySelector('.i')
        let input = document.querySelectorAll('input')
        input[0].disabled = true
        input[1].disabled = true
        i_class.addEventListener('scroll', function() {
            for (const i in input) {
                input[i].disabled = parseInt(this.scrollHeight - this.scrollTop) - this.clientHeight
            }
        }); */
        /* let animation = document.querySelector('.animation')
        animation.style.width = 100 + 'px'
        animation.style.height = 100 + 'px'
        animation.style.backgroundColor = 'red'
        animation.style.position = 'absolute'
        let movie = setInterval(() => {
            if (animation.offsetLeft >= 800) {
                clearInterval(movie)
            }
            animation.style.left = animation.offsetLeft + 1 + 'px';
        }) */
        /* let mo = document.querySelector('.mouseOver')
        let me = document.querySelector('.mouseEnter')
        mo.addEventListener('mouseover', () => {
            console.log('mouseOver'); //支持冒泡
        });
        me.addEventListener('mouseover', () => {
            console.log('mouseOver'); //支持冒泡
        });
        // mo.addEventListener('mouseenter', () => {
        //     console.log('mouseEnter'); //不支持冒泡
        // });
        // me.addEventListener('mouseenter', () => {
        //     console.log('mouseEnter'); //不支持冒泡
        // }); */
        /* let e_scroll = document.querySelector('.e')
        let d_c = document.querySelector('.c')
        let ht = d_c.offsetTop
        document.addEventListener('scroll', function() {
            if (window.pageYOffset > ht) {
                e_scroll.style.display = 'flex'
                e_scroll.innerHTML = '返回顶部'
                e_scroll.addEventListener('click', function() {
                    window.pageYOffset = 0
                })
            }
            if (window.pageYOffset < ht) {
                e_scroll.style.display = 'none'
            }
            console.log(window.pageYOffset);
        }); */
        /* let i_Scroll = document.querySelector('.i')
        i_Scroll.style.fontSize = '20px'
        i_Scroll.addEventListener('scroll', function() {
            console.log(this.scrollTop);
        }); */
        /* let docEL = document.documentElement;
        let rem = docEL.clientWidth / 10
        setRemUnit()
        function setRemUnit() {
            // alert(1)
            if (document.body) {
                docEL.style.fontSize = 2 * rem + 'px'
            }
        }
        window.addEventListener('resize', setRemUnit)
        window.addEventListener('pageshow', function(e) {
            if (e.persisted) { //是否来自缓存
                setRemUnit()
            }
        }); */
        /* let docEL = document.documentElement; //根元素
        let dpr = window.devicePixelRatio || 1; //物理像素比
        (function nyN(a) {
            // console.log(docEL.clientWidth);
            if (document.body) {
                // document.body.style.fontSize = (16 * dpr) + 'px'
                let rem = docEL.clientWidth / 10; //把HTML划分10等份
                docEL.style.fontSize = rem + 'px'
            } else {
                document.addEventListener('DOMContentLoaded', nyN)
            }
            console.log(a)
            console.log(dpr)
        })('立即执行函数A');
        (function nyN(a) {
            console.log(a)
        }('立即执行函数B')) */
        /* let ctn = document.querySelector('.container')
        let img = document.querySelector('.img')
        let ylb = document.querySelector('.ylb')
        let mas = document.querySelector('.mas')

        function m_get(e) {
            let bigTimes = 300
            let x = e.pageX - ctn.offsetLeft
            let y = e.pageY - ctn.offsetTop
            let bigX = -x * bigTimes / 100
            let bigY = -y * bigTimes / 100
            console.log(e.pageX, e.pageY);
            if (x < ylb.offsetWidth / 2) {
                x = ylb.offsetWidth / 2
            } else if (x > img.offsetWidth - ylb.offsetWidth / 2) {
                x = img.offsetWidth - ylb.offsetWidth / 2
            }
            if (y < ylb.offsetHeight / 2) {
                y = ylb.offsetHeight / 2
            } else if (y > img.offsetHeight - ylb.offsetHeight / 2) {
                y = img.offsetHeight - ylb.offsetHeight / 2
            }
            mas.style.display = 'block'
            ylb.style.left = x + 'px'
            ylb.style.top = y + 'px'
            ylb.style.transform = 'translate(-50%,-50%)'

            mas.style.backgroundSize = bigTimes + '%'
            mas.style.backgroundPosition = bigX + 'px' + ' ' + bigY + 'px'
        }

        function m_leave(e) {
            mas.style.display = 'none'
        }
        mas.addEventListener('mousemove', function() {
            mas.style.display = 'block'
        })
        mas.addEventListener('mouseout', function() {
            mas.style.display = 'none'
        })
        ylb.addEventListener('mousemove', m_get)
        img.addEventListener('mouseover', m_get)
        ctn.addEventListener('mouseout', m_leave); */
        /* let flag = 0;
        let clickme = document.querySelector('.clickLogin')
        let conta = document.querySelector('.container')
        let closeC = document.querySelector('.closeC')
        let moveD = document.querySelector('#moveD')
        clickme.addEventListener('click', function() {
            if (flag) {
                flag = 0
                conta.style.display = 'none'
                this.innerHTML = '点我显示'
            } else {
                flag = 1
                conta.style.display = 'flex'
                this.innerHTML = '点我隐藏'
            }
        });
        closeC.addEventListener('click', function() {
            if (flag) {
                flag = 0
                conta.style.display = 'none'
                clickme.innerHTML = '点我显示'
            } else {
                flag = 1
                conta.style.display = 'flex'
                clickme.innerHTML = '点我隐藏'
            }
        });
        moveD.addEventListener('mousedown', function(e) {
            let x = e.pageX - conta.offsetLeft;
            let y = e.pageY - conta.offsetTop;

            function movee(e) {
                conta.style.left = e.pageX - x + 'px'
                conta.style.top = e.pageY - y + 'px'
            }
            document.addEventListener('mousemove', movee);
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', movee)
            })
        }); */
        /* let btb = document.querySelector('button')
        btb.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        }); */
        /* // document.addEventListener('click', function() {
        //     location.href = 'https://baidu.com'
        // })
        document.querySelector('body').innerHTML = '你将在' + 5 + '后跳转'
        let timmer = 4
        let loca = function() {
            if (timmer == 0) {
                location.href = 'https://baidu.com'
            } else {
                document.querySelector('body').innerHTML = '你将在' + timmer + '后跳转'
                timmer--
            }
        }
        setInterval(loca, 1000); */
        /* //异步,先执行栈，再任务队列
        console.log(1); //同步任务放在主线程执行栈处理
        setTimeout(() => {
            console.log(2); //函数被作为异步任务处理，被放到任务队列
        }, 0); //同步任务放在主线程执行栈处理
        console.log(3); //同步任务放在主线程执行栈处理
        //异步行为会被放入异步进程处理
        document.onclick = function() {
            console.log('click');
        }; */
        /* let input = document.querySelector('input');
        let btn = document.querySelector('button');
        let time = 10;
        btn.innerHTML = '发送'
        btn.addEventListener('click', function() {
            btn.disabled = true;
            setInterval(function() {
                if (time == 0) {
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    clearInterval(this);
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
            time = 10;
        }); */
        /* let hour = document.querySelector('.hour');
        let minutes = document.querySelector('.minutes');
        let second = document.querySelector('.second');
        let btn1 = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        let timer = null;
        btn1.innerHTML = '开始';
        btn2.innerHTML = '暂停';
        getLineTime()

        function getLineTime() {
            const deadlineTime = '2022-04-09 06:00:00';
            let nowTime = new Date().getTime();
            let deadTime = new Date(deadlineTime).getTime();
            let lineTime = deadTime - nowTime;
            let d = Math.floor(lineTime / (1000 * 60 * 60 * 24)); //天数
            d = d < 10 ? '0' + d : d;
            let h = Math.floor(lineTime / (1000 * 60 * 60) % 24); //小时数
            h = h < 10 ? '0' + h : h;
            let m = Math.floor(lineTime / (1000 * 60) % 60); //分钟数
            m = m < 10 ? '0' + m : m;
            let s = Math.floor(lineTime / 1000 % 60); //秒数
            s = s < 10 ? '0' + s : s;
            hour.innerHTML = h;
            minutes.innerHTML = m;
            second.innerHTML = s;
        } */
        // setInterval(function() {
        //     getLineTime();
        // }, 1000);
        /* btn1.addEventListener('click', function() {
            timer = setInterval(function() {
                getLineTime();
            }, 1000);
        });
        btn2.addEventListener('click', function() {
            clearInterval(timer);
        }); */
        /* setInterval(function() {
            console.log('Hello');
        }, 1000); */
        /* //清除setTimeout定时器
        let btn = document.createElement('button');
        document.querySelector('body').appendChild(btn);
        btn.innerText = '停止计时器';
        let tm = setTimeout(() => {
            alert('爆炸');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(tm);
        }); */
        /* //回调函数
        window.addEventListener('load', function() {
            let bdy = document.querySelector('body');
            let btn = document.createElement('button');
            bdy.appendChild(btn);
            btn.innerText = '你好';
            setTimeout(() => {
                btn.style.display = 'none'
            }, 2000);
        }); */
        /* //setTimeout定时器
                    let time1 = setTimeout(() => {
                        console.log('你好1');
                    }, 2000);
                    let time2 = setTimeout(() => {
                        console.log('你好2');
                    }, 5000); */
        /* window.addEventListener('load', function() {
            let btn = document.querySelector('button');
            btn.innerText = '按钮';
            btn.style.width = window.innerWidth / 2 + 'px';
            btn.style.height = window.innerHeight / 2 + 'px';
            window.addEventListener('resize', function() {
                if (window.innerWidth > 500 && window.innerHeight > 205) {
                    btn.style.display = '';
                    btn.style.width = window.innerWidth / 2 + 'px';
                    btn.style.height = window.innerHeight / 2 + 'px';
                } else {
                    btn.style.display = 'none';
                }
            });
        }); */
        /* // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.innerText = '按钮';
        //     btn.addEventListener('click', function() {
        //         alert('你点到了')
        //     });
        // };
        // window.onload = function() {
        //     alert('你好');
        // };
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.innerText = '按钮';
            btn.addEventListener('click', function() {
                alert('你点到了')
            });
        });
        window.addEventListener('load', function() {
            alert('你好');
        });
        document.addEventListener('DOMContentloaded', function() {
            alert('DOMContentloaded');                              //IE9以上
        }); */
        /* //输入框文字同步显示
        let jd_d = document.querySelector('.jd_d');
        // jd_d.style.display = 'none';
        let jd_ipt = document.querySelector('.jd_ipt');
        jd_ipt.setAttribute('maxlength', '16');
        document.onkeydown = function() { //按下 识别功能键 优先
            console.log('按下keydown：' + event.key + '的ASCII是' + event.keyCode);
        };
        document.onkeypress = function() { //不识别功能键
            console.log('按下keypress：' + event.key + '的ASCII是' + event.keyCode);
        };
        document.onkeyup = function(e) { //弹起
            console.log('弹起keyup：' + event.key + '的ASCII是' + event.keyCode);
            if (e.keyCode == 13) {
                document.querySelector('.jd_ipt').focus();
            }
        };
        jd_ipt.addEventListener('keyup', function(e) {
            if (this.value == '') {
                jd_d.style.display = 'none';
            } else {
                jd_d.style.display = '';
                jd_d.innerText = jd_ipt.value;
            }
        });
        jd_ipt.addEventListener('blur', function() {
            jd_d.style.display = 'none';
        });
        jd_ipt.addEventListener('focus', function() {
            if (this.value != '') {
                jd_d.style.display = 'flex';
            }
        }); */
        /* //自定义鼠标图片
        let shenzi = document.querySelector('img');
        document.querySelector('*').style.cursor = 'none';
        document.addEventListener('contextmenu', function(e) { //禁止使用右键菜单
            e.preventDefault();
            console.log(e.clientX); //页面距离顶部的距离
        });
        document.addEventListener('mousemove', function(e) {
            let x = e.clientX;
            let y = e.clientY;
            shenzi.style.left = x - 25 + 'px';
            shenzi.style.top = y - 25 + 'px';
        }); */
        /* document.addEventListener('contextmenu', function(e) { //禁止使用右键菜单
            e.preventDefault();
        });
        document.addEventListener('selectstart', function(e) { //禁止选中文字
            e.preventDefault();
        }); */
        /* //事件委托
        document.querySelector('ul').addEventListener('click', function(E) {
            for (let i = 0; i < this.children.length; i++) {
                this.children[i].style.backgroundColor = '';
            }
            E.target.style.backgroundColor = 'pink';
        }); */
        /* document.querySelector('a').addEventListener('click', function(e) {
            e.preventDefault(); //阻止事件默认行为
        }); */
        // document.querySelector('a').onclick=function(e){
        //     return false;//不能用于addEventListener
        //     e.returnValue;//ie 678
        // }
        /* let div = document.querySelector('div');
        div.style.backgroundColor = 'cyan';
        div.style.width = '200px';
        div.style.height = '200px';
        div.addEventListener('click', function(abc) {
            // console.log(event);//不需要传参
            console.log(abc.target); //返回的是触发事件的对象（元素）
            console.log(this); //返回的是绑定事件的对象（元素）
        });
        div.addEventListener('mouseout', fn); //冒泡
        div.addEventListener('mouseover', fn)
        div.addEventListener('mouseleave', fn); //不冒泡

        function fn(e) {
            console.log(e.type);
        } */
        // div.onclick=function(e){
        //     e=(e||window.event)       //IE兼容性解决办法
        // }
        //捕获，自上而下到DOM底层节点
        /* let father = document.querySelector('.father');
        father.style.backgroundColor = 'pink';
        father.style.width = '300px';
        father.style.height = '300px';
        let son = document.querySelector('.son');
        son.style.backgroundColor = 'cyan';
        son.style.width = '200px';
        son.style.height = '200px';
        son.addEventListener('click', function() {
            alert('Son');
        }, true);
        father.addEventListener('click', function() {
            alert('Father');
        }, true); */
        //冒泡，自下而上到DOM顶层节点
        /* let father = document.querySelector('.father');
        father.style.backgroundColor = 'pink';
        father.style.width = '300px';
        father.style.height = '300px';
        let son = document.querySelector('.son');
        son.style.backgroundColor = 'cyan';
        son.style.width = '200px';
        son.style.height = '200px';
        son.addEventListener('click', function(e) {
            alert('Son');
            e.stopPropagation(); //停止冒泡行为Propagation传播
        }, false);
        // son.onclick=function(e){
        //     e=e||window.event;
        //     e.cancelBubble=true//IE 678 停止冒泡行为
        // };
        father.addEventListener('click', function() {
            alert('Father');
        }, false); */
        //DOM事件流：捕获->当前目标 当前目标->冒泡
        /* let btn1 = document.createElement('button');
        btn1.innerText = '按钮';
        document.querySelector('body').appendChild(btn1);
        btn1.addEventListener('click', fn);
        // btn1.attachEvent('onclick', fn1);//IE
        function fn() {
            alert(123);
            btn1.removeEventListener('click', fn);
        };
        // function fn1() {
        //     alert(123);                      //IE
        //     btn1.detachEvent('click', fn1);
        // }; */
        /* let eventListener = document.querySelector('.btnevent');
        eventListener.addEventListener('click', function() {
            alert('Hi');
        });
        eventListener.addEventListener('click', function() {
            alert('Hello And Hi');
        }); */
        /* let li = document.querySelectorAll('li');
        for (let i = 0; i < li.length; i++) {
            li[i].setAttribute('data-' + i, '');
        }
        console.log(li[1].previousElementSibling.getAttributeNames());
        console.log(li[1].nextElementSibling.getAttributeNames()); */
        /* let ds = document.querySelector('button');
        ds.onclick = () => {
            document.write('<button>123</button>');
        }; */
        /* function wifeFun(name, attribute, region, weapons) {
            this.name = name;
            this.attribute = attribute;
            this.region = region;
            this.weapons = weapons;
        };
        const linghua = new wifeFun('神里凌华', '冰', '稻妻', '单手剑');
        const shenzi = new wifeFun('八重神子', '雷', '稻妻', '法器');
        const keqing = new wifeFun('刻晴', '雷', '璃月', '单手剑');
        const xiaogong = new wifeFun('霄宫', '火', '稻妻', '弓');
        let datas = [linghua, shenzi, keqing, xiaogong];
        let tbody = document.querySelector('tbody');
        for (let a = 0; a < datas.length; a++) {
            let tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (let b in datas[a]) {
                let td = document.createElement('td');
                td.innerHTML = datas[a][b];
                tr.appendChild(td);
            }
            let td = document.createElement('td');
            td.innerHTML = "<a href='javascript:;'>删除该老婆</a>";
            tr.appendChild(td);
        }
        let adel = document.querySelectorAll('a');
        // let trd = document.querySelectorAll('tr');
        for (let b = 0; b < adel.length; b++) {
            adel[b].onclick = function() {
                // trd[b + 1].parentNode.removeChild(trd[b + 1]);
                tbody.removeChild(this.parentNode.parentNode)
            }
        } */
        /* var cloneLi = document.querySelector('ul');
        var clonedLi = cloneLi.children[1].cloneNode();
        var clonedLiT = cloneLi.children[1].cloneNode(true);
        cloneLi.appendChild(clonedLi);
        cloneLi.appendChild(clonedLiT); */
        /* var textarea = document.querySelector('textarea');
        var button = document.querySelector('button');
        var ul = document.querySelector('ul');
        button.onclick = function() {
            if (textarea.value.trim() == '') {
                alert('输入为空');
                textarea.value = '';
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = textarea.value + "<a href='javascript:;'>删除</a>";
                ul.insertBefore(li, ul.children[0]);
                var adel = document.querySelectorAll('a');
                for (var a = 0; a < adel.length; a++) {
                    adel[a].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
                // ul.appendChild(li);
                textarea.value = '';
            }
        }; */
        /* var li = document.createElement('li');
        var lii = document.createElement('li');
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        ul.insertBefore(lii, ul.children[0]); */
        /* var sp = document.querySelector('.sb');
        var dv = document.querySelector('.b');
        console.log(sp.previousSibling);
        console.log(sp.nextSibling);
        console.log(dv.previousSibling); //包含文本节点
        console.log(dv.previousElementSibling);
        console.log(dv.nextElementSibling); */
        /* var nav = document.querySelector('.flexUl');
        var lis = nav.children;
        for (var a = 0; a < lis.length; a++) {
            lis[a].onmouseover = function() {
                for (var a = 0; a < this.children.length; a++) {
                    this.children[a].style.display = 'block'
                }
            }

            lis[a].onmouseout = function() {
                for (var a = 0; a < this.children.length; a++) {
                    this.children[a].style.display = 'none'
                }
            }
        } */
        /* var ull = document.querySelector('ul');
        console.log(ull.parentNode);
        console.log(ull.childNodes);
        console.log(ull.children[0]);
        console.log(ull.children[ull.children.length - 1]);
        console.log(ull.firstChild);
        console.log(ull.lastChild);
        console.log(ull.firstElementChild);
        console.log(ull.lastElementChild.outerText); */
        /* var divdata = document.querySelector('divnn');
        divdata.setAttribute("data-index", 2);
        divdata.setAttribute("data-s-index", 3);
        console.log(divdata.dataset);
        console.log(divdata.dataset.index);
        console.log(divdata.dataset['sIndex']); //驼峰命名法获取 */
        /* var div = document.querySelector('div');
        console.log(div.id);
        div.id = 'hi';
        console.log(div.id);
        div.setAttribute('abc', 1);
        console.log(div.getAttribute('abc'));
        div.removeAttribute('id');
        div.removeAttribute('abc'); */
        /* var j_all = document.getElementById('j_all');
        var j_tbs = document.querySelectorAll('#j_tbs');
        j_all.onclick = function() {
            for (var a = 0; a < j_tbs.length; a++) {
                j_tbs[a].checked = this.checked;
            }
        }
        for (var a = 0; a < j_tbs.length; a++) {
            j_tbs[a].onclick = function() {
                var flag = true;
                for (var a = 0; a < j_tbs.length; a++) {
                    if (j_tbs[a].checked == false) {
                        flag = false;
                        break;
                    }
                }
                j_all.checked = flag
            }
        } */
        /* var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var a = 0; a < trs.length; a++) {
            trs[a].onmousemove = function() {
                this.className = 'bg'
            }
            trs[a].onmouseout = function() {
                this.className = ''
            }
        } */
        /* var timer = document.getElementById('time');*/
        /* var lis = document.getElementsByTagName('li');
        console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        var ol = document.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li')); */
        /* var box = document.getElementsByClassName('box');
        console.log(box[1]); //盒子2
        // querySelector返回的是第一个对象
        var box2 = document.querySelector('.box');
        console.log(box2);
        var box3 = document.querySelector('.box1');
        console.log(box3);
        var ul1 = document.querySelector('ul');
        console.log(ul1.querySelector('li'));
        var li1 = document.querySelectorAll('li');
        console.log(li1[1]); //神子2 */
        /* var doca = document.documentElement;
        var bodyb = document.body;
        console.log(doca);
        console.log(bodyb); */
        /*  var timer = document.querySelector('#timer');
         var btn2time = document.querySelector('#btn2time');

         function getReallyDate() {
             var date = new Date();
             var y = date.getFullYear();
             var m = date.getMonth() + 1;
             m = m < 10 ? '0' + m : m;
             var d = date.getDate();
             d = d < 10 ? '0' + d : d;
             var nowDate = y + '-' + m + '-' + d;
             return y + '-' + m + '-' + d;
         }

         timer.innerText = '日期'
         btn2time.innerHTML = getReallyDate();

         timer.onclick = function() {
             // alert('老婆');
             // console.log('老婆');
             //innerHTML inndeText
             btn2time.innerHTML = '<strong>今天是</strong>：' + getReallyDate();
             setTimeout(function() {
                 btn2time.innerText = '<strong>今天是</strong>：' + getReallyDate();
             }, 2000)

         };
         var ppp = document.querySelector('ppp');
         console.log(ppp.innerHTML);
         console.log(ppp.innerText); */
        /* var xg = document.getElementById('xg');
        var lh = document.getElementById('lh');
        var sz = document.getElementById('sz');
        var allBtn = document.querySelectorAll('button');
        var img = document.getElementById('img');
        for (var a = 0; a < allBtn.length; a++) {
            allBtn[0].style.border = '1px #e67e22 solid';
            allBtn[1].style.border = '1px #3498db solid';
            allBtn[2].style.border = '1px #ff7979 solid';
        }
        xg.innerHTML = '霄宫';
        lh.innerHTML = '凌华';
        sz.innerHTML = '神子';
        xg.onmousemove = function() {
            img.style.backgroundImage = 'url' + '(' + 'xg.jpg' + ')'
            img.style.transition = '.29s linear'
        };
        lh.onmousemove = function() {
            img.style.backgroundImage = 'url' + '(' + 'lh.jpg' + ')'
            img.style.transition = '.29s linear'
        };
        sz.onmousemove = function() {
            img.style.backgroundImage = 'url' + '(' + 'shenzi.png' + ')'
            img.style.transition = '.29s linear'
        }; */
        /* var btnn1 = document.querySelector('#btnn1');
        var btnn2 = document.querySelector('#btnn2');
        var iptt = document.querySelectorAll('.iptt');
        btnn1.innerHTML = '神里';
        btnn2.innerHTML = '霄宫';
        btnn2.disabled = true;
        btnn1.onclick = function() {
            this.disabled = true;
            btnn2.disabled = false;
            iptt[1].src = './lh.jpg'
        };
        btnn2.onclick = function() {
            this.disabled = true;
            btnn1.disabled = false;
            iptt[1].src = './xg.jpg'
        } */
        /* var icon1 = document.getElementById('icon1');
        var icon2 = document.getElementById('icon2');
        icon2.style.display = 'none';
        var psw = document.getElementById('psw');
        icon1.onmousemove = function() {
            icon1.style.display = 'none';
            icon2.style.display = '';
            psw.type = 'text';
        }
        icon2.onmouseleave = function() {
            icon1.style.display = '';
            icon2.style.display = 'none';
            psw.type = 'password';
        } */
        /* var iptfocs = document.querySelector('#iptfocs');
        iptfocs.value = '神里';
        iptfocs.style.color = '#999';
        iptfocs.onfocus = function() {
            if (this.value === '神里') {
                this.value = ''
            }
            this.style.color = 'black';
        }
        iptfocs.onblur = function() {
            if (this.value === '') {
                this.value = '神里'
            }
            this.style.color = '#999';
        } */
        /* var play = document.getElementById('play');
        var marginLocation = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 600, 700];
        // var divcolor = ['#55efc4', '#fdcb6e', '#0984e3', '#fd79a8', '#636e72', '#a29bfe', '#0c2461', '#38ada9', '#6a89cc'];
        var bgimg = ['lh.jpg', 'xg.jpg', 'shenzi.png'];
        play.style.marginTop = '25%';
        play.style.marginLeft = '25%';
        play.style.borderRadius = '25px';
        play.style.backgroundImage = 'url("' + bgimg[getRndInteger(0, bgimg.length - 1)] + '")';
        play.onmousemove = function() {
            this.style.backgroundImage = 'url("' + bgimg[getRndInteger(0, bgimg.length - 1)] + '")';
            this.style.transition = '.08s'
            this.style.marginTop = marginLocation[getRndInteger(0, marginLocation.length - 1)] + 'px';
            this.style.marginLeft = marginLocation[getRndInteger(0, marginLocation.length - 1)] + 'px';
        }

        function getRndInteger(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        } */
        /* var changeClass = document.querySelector('.changeClassName');
        var chdiv = document.querySelector('div');
        chdiv.style.userSelect='none';
        chdiv.innerHTML='改变类名';
        chdiv.onclick=function(){
            console.log(this.className);
            this.className=='changeClassName'?changeClass.className='changed':revert();
        }
        function revert(){
            var changed = document.querySelector('.changed');
            changed.className='changeClassName';
        } */
        /* var ipft = document.querySelector('input');
        var tips = document.querySelector('.tips');
        ipft.onblur=function(){
            if(this.value.length<6||this.value.length>16){
                tips.className='tips wrong';
                tips.innerHTML='X 你输入的位数不满足6-16位'
            }else{
                tips.className='tips right'
                tips.innerHTML='V'
            }
        } */
        /* var username = document.querySelector('#username');
        var passwd = document.querySelector('#passwd');
        username.value = '输入帐号';
        passwd.type = 'text'
        passwd.value = '输入密码';
        username.onfocus = function() {
            this.value == '输入帐号' ? this.value = '' : getValue();
        }
        username.onblur = function() {
            this.value.length == 0 || this.value.indexOf(' ') != -1 ? this.value = '输入帐号' : getValue();
        }
        passwd.onfocus = function() {
            this.value == '输入密码' ? this.value = '' : getValue();
            this.type = 'password';
        }
        passwd.onblur = function() {
            this.value.length == 0 || this.value.indexOf(' ') != -1 ? toPSW() : getValue();
        }

        function getValue() {
            return valueUserName = username.value;
        }

        function toPSW() {
            passwd.type = 'text';
            passwd.value = '输入密码'
        } */
        /* var ads = document.querySelector('.ads');
        var adClose = document.querySelector('#closeAD');
        adClose.onclick = function() {
            ads.style.display = 'none'
        } */
        /* mainMenu = document.querySelector('.mainMenu');
        mainMenu.style.borderRadius = '15px';
        mainMenu.style.textAlign = 'center'
        menu2 = document.querySelector('.menu2');
        menu3 = document.querySelector('.menu3');
        menu2.style.display = 'none';
        menu3.style.display = 'none';
        mainMenu.onmousemove = function() {
            menu2.style.marginTop = '9px';
            menu2.style.display = '';
            menu3.style.display = '';
        }
        mainMenu.onmouseleave = function() {
            menu2.style.display = 'none';
            menu3.style.display = 'none';
        } */
        /* var button = document.querySelector('button');
        var flag = 0;
        button.onclick = function() {
            if (flag == 0) {
                document.querySelector('body').style.backgroundColor = 'black';
                flag = 1;
            } else {
                document.querySelector('body').style.backgroundColor = '#CCC';
                flag = 0;
            }
        } */
        /* var btns5 = document.querySelectorAll('button');
        for (var a = 0; a < btns5.length; a++) {
            btns5[a].style.border = 'none';
            btns5[a].style.marginRight = '2px';
            btns5[a].style.backgroundColor = 'green'
            btns5[a].onmousemove = function() {
                for (var b = 0; b < btns5.length; b++) {
                    btns5[b].style.backgroundColor = 'green'
                }
                this.style.backgroundColor = 'red'
            }
        } */
    </script>
</body>

</html>